<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>自定义多媒体控件</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <audio src="./src/陈奕迅-孤勇者.mp3"></audio>
  <!-- 多媒体控件 -->
  <div class="media">
    <!-- 播放、暂停按钮 -->
    <div class="playOrPause">
      <i class="iconfont icon-play"></i>
    </div>
    <!-- 播放时间 -->
    <div class="time">
      <span class="currentMinute">00</span>
      :
      <span class="currentSecond">00</span>
      /
      <span class="durationMinute">00</span>
      :
      <span class="durationSecond">00</span>
    </div>
    <!-- 播放进度条 -->
    <div class="playRange">
      <div class="currentRange"></div>
      <div class="playBtn"></div>
    </div>
    <!-- 播放倍速 -->
    <div class="rate">
      <div class="title">倍速</div>
      <ul class="list">
        <li>0.5</li>
        <li class="active">1</li>
        <li>1.25</li>
        <li>1.5</li>
        <li>2</li>
      </ul>
    </div>
    <!-- 声音控件 -->
    <div class="volume">
      <!-- 声音大小控制 -->
      <div class="volumeRange">
        <div class="currentVolume"></div>
        <div class="volumeBtn"></div>
      </div>
      <!-- 声音按钮 -->
      <i class="iconfont icon-sound-on"></i>
    </div>
    <!-- 歌词滚动 -->
    <div class="box">
      <ul>
        <li></li>
      </ul>
    </div>
  </div>

  <script src="./js/jquery.js"></script>
  <script src=" ./js/index.js" type="module"></script>
</body>

</html>